:root {

  /* 数字越大, 颜色越淡 */
  --el-color-primary: #c1992f;
  --el-color-primary-dark-2: rgba(250, 195, 56, 0.8);
  --el-color-primary-light-1: rgba(193, 153, 47, 0.9);
  --el-color-primary-light-2: rgba(193, 153, 47, 0.8);
  --el-color-primary-light-3: rgba(193, 153, 47, 0.7);
  --el-color-primary-light-5: rgba(193, 153, 47, 0.5);
  --el-color-primary-light-6: rgba(193, 153, 47, 0.4);
  --el-color-primary-light-7: rgba(193, 153, 47, 0.3);
  --el-color-primary-light-8: rgba(193, 153, 47, 0.2);
  --el-color-primary-light-9: rgba(232, 219, 190, 0.505);

  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;

  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;

  --el-color-danger: #e35959;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;

  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;

  --el-color-info: #a4a8b0;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;

  --el-color-primary-flip: rgb(140, 140, 140);

  --el-bg-color: #f5f7fa;

  /* 文本颜色 */
  /* --el-text-color-primary: #303133; */
  --el-text-color-primary: #606266;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;

  /* 菜单文本的颜色 */
  --el-menu-text-color: #86888e;
  --el-menu-active-color: var(--el-color-primary);

  --el-font-size-base: 14px;

  --el-menu-item-height: 40px;
  --el-mask-color: rgba(255, 255, 255, 0.95);
}

html.dark {
  /* 数字越大, 颜色越淡 */
  --el-color-primary: rgb(140, 140, 140);
  --el-color-primary-dark-2: rgba(112, 112, 112, 1);
  --el-color-primary-light-1: rgba(140, 140, 140, 0.9);
  --el-color-primary-light-2: rgba(140, 140, 140, 0.8);
  --el-color-primary-light-3: rgba(140, 140, 140, 0.7);
  --el-color-primary-light-5: rgba(140, 140, 140, 0.5);
  --el-color-primary-light-6: rgba(140, 140, 140, 0.4);
  --el-color-primary-light-7: rgba(140, 140, 140, 0.3);
  --el-color-primary-light-8: rgba(140, 140, 140, 0.2);
  --el-color-primary-light-9: rgba(140, 140, 140, 0.2);

  --el-color-danger: #811111;

  --el-color-info: #64666b;

  --el-color-primary-flip: #c1992f;

  --el-bg-color: #262727;

  /* 文本颜色 */
  --el-text-color-primary: #909399;
  --el-text-color-regular: #909399;
  --el-text-color-secondary: #A3A6AD;
  --el-text-color-placeholder: #8D9095;
  --el-text-color-disabled: #6C6E72;

  /* 菜单文本的颜色 */
  --el-menu-text-color: #86888e;
  --el-menu-active-color: #ffffff;

  /* 文本框颜色 */
  --el-input-bg-color: #000000;

  --el-mask-color: rgb(18, 18, 18, 0.95);
}

/* ================================= 自定义颜色 ================================== */

:root {
  --xz-html-color: #ffffff;
  /* 背景色 */
  --xz-bg-color: #f1f1f1;
  /* 另一个背景色，原el中存在一个不是 --el-bg-color 的颜色, 所以 --xz-bg-color-other 为 el 那个找不到的背景色 */
  --xz-bg-color-other: rgb(255, 255, 255);
  --xz-bg-color-other-1: rgba(255, 255, 255, 0.8);

  /* 三个状态的颜色 */
  --xz-status-succ-bg: #95d977;
  --xz-status-succ-border: #538c37;
  --xz-status-fail-bg: #e35959;
  --xz-status-fail-border: #c30000;
  --xz-status-warn-bg: #e3a300;
  --xz-status-warn-border: #b07e00;

  /* box-shawod，shadow-dark 通常用在 hover 中 */
  --xz-box-shadow: 3px 3px 10px 3px rgba(107, 104, 104, 0.3);
  --xz-box-shadow-dark: 0 2px 14px 1px rgba(0, 0, 0, .3);

  /* 天气的颜色 */
  --xz-text-weather: #ffffff;

  /* ================================= switch 自定义颜色 ================================== */
  --xz-switch-action-color: #ffffff;
  --xz-switch-action-color-checked: #ffffff;
  --xz-switch-text-color: #ffffff;
  --xz-switch-text-color-checked: #ffffff;

}

html.dark {
  --xz-html-color: #1e1e1e;
  --xz-bg-color: var(--el-bg-color);
  /* 另一个背景色，原el中存在一个不是 --el-bg-color 的颜色, 所以 --xz-bg-color-other 为 el 那个找不到的背景色 */
  --xz-bg-color-other: rgb(18, 18, 18);
  --xz-bg-color-other-1: rgba(18, 18, 18, 0.95);

  /* 三个状态的颜色 */
  --xz-status-succ-bg: #538c37;
  --xz-status-succ-border: #3c602a;
  --xz-status-fail-bg: #811111;
  --xz-status-fail-border: #941313;
  --xz-status-warn-bg: #b07e00;
  --xz-status-warn-border: #805f0c;
  --xz-status-info-bg: #8f8888;
  --xz-status-info-border: #8f8888;

  /* box-shawod，shadow-dark 通常用在 hover 中 */
  --xz-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  --xz-box-shadow-dark: 0 2px 14px 3px rgba(0, 0, 0, 1);

  /* 天气的颜色 */
  --xz-text-weather: #d5d5d5;

  /* ================================= switch 自定义颜色 ================================== */
  --xz-switch-action-color: rgb(58, 58, 58);
  --xz-switch-action-color-checked: #ffffff;
  --xz-switch-text-color: var(--el-color-primary);
  --xz-switch-text-color-checked: #ffffff;
}